@charset "utf-8";
$fontSize:100;
@function r($p){
    @return $p/$fontSize*1rem;
}
html{
    font-size: $fontSize*1px;
}
body{
    font-size: 13px;
} 
  
  

//中部公共部分
.middle{
    width: 100%;
    background: #f5f5f5;
    //加载更多
    .loadmore{
        color: #bbbbbb;
        text-align: center;
        padding: r(18) 0;}
    //大图
    .m_bigpic{
        height: r(358);
        background: url(../img/06.jpg);
        background-size: 100%;
        position: relative;
        //黑块
        .m_black{
            width: 100%;
            height: r(107);
            background: black;
            opacity:0.6;
            position: absolute;
            bottom: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            color: white;
            padding: r(20) r(28) r(20);
            box-sizing: border-box;
            p{
                width: 100%;
                display:flex;
                align-items: center;
                font-size: 12px;}
        }
    }
    //中部内容
    //第一个白色块
    .white{
        background: white;
        width: 100%;
        padding: r(22) r(28) r(28) r(28);
        box-sizing: border-box;
        margin-top: r(26);
        //头像 至 预约报名
        .white_top{
            width: 100%;
            height: r(58);
            display: flex;
            justify-content: space-between;
            align-items: center;
            //头像和名字
            .data{
                display: flex;
                align-items: center;
                //头像
                .avatar{
                    width:r(58);
                    height: r(58);
                    background:#898989 ;
                    border-radius: 50%;}
                //名字 职业
                >p{color:#c5c5c5 ;
                margin-left: r(17);
                    >span{font-size: 12px;}
                }
            }
            //预约报名
            >button{width: r(228);
                height: 100%;
                background: #b20000;
                color: white;
                position: relative;
                    >img{width: r(25);
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(-100%,65%);}
            }
            
        }
        //高端移动应用开发
        .exploit{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin: r(12) 0 r(7);
            >p:last-child{color: #323232;
                font-size: 10px;}
        }
        //图片
        .white_pic>img{width: 100%;
            padding-top:r(15) ;
            border-top: 1px solid #dddddd;}
    }
}



